<template>
  <view class="index-container">
    <!-- 顶部用户信息区域 -->
    <view class="user-header">
      <view class="user-avatar">
        <image src="/static/tabbar/i3.png" mode="aspectFill"></image>
      </view>
      <view class="user-info">
        <text class="welcome-text">你好! 用户名</text>
      </view>
    </view>

    <!-- 主要功能按钮区域 -->
    <view class="main-functions">
      <view class="function-row">
        <view class="main-function-btn consultation-btn">
          <view class="function-icon">
            <text class="icon-text">🩺</text>
          </view>
          <text class="function-title" @click="goToConsultation">在线问诊</text>
          <text class="function-desc">balabalbal</text>
        </view>
        <view class="main-function-btn appointment-btn">
          <view class="function-icon">
            <text class="icon-text">💡</text>
          </view>
          <text class="function-title" @click="goToAppointment">预约挂号</text>
          <text class="function-desc">balabalbal</text>
        </view>
      </view>
    </view>

    <!-- 小型功能图标区域 -->
    <view class="small-functions">
      <view class="small-function-item">
        <view class="small-icon medical-icon">
          <text class="small-icon-text">➕</text>
        </view>
        <text class="small-function-name">医疗宝典</text>
      </view>
      <view class="small-function-item">
        <view class="small-icon search-icon">
          <text class="small-icon-text">🔍</text>
        </view>
        <text class="small-function-name">药品查询</text>
      </view>
      <view class="small-function-item">
        <view class="small-icon pharmacy-icon">
          <text class="small-icon-text">🚚</text>
        </view>
        <text class="small-function-name">社区药房</text>
      </view>
      <view class="small-function-item">
        <view class="small-icon reminder-icon">
          <text class="small-icon-text">⏰</text>
        </view>
        <text class="small-function-name">用药提醒</text>
      </view>
    </view>

    <!-- 健康新闻区域 -->
    <view class="news-section">
      <view class="news-header">
        <text class="news-title">健康新闻</text>
        <view class="news-underline"></view>
      </view>
      <view class="news-list">
        <view class="news-item">
          <view class="news-content">
            <text class="news-text">这10个习惯，毁掉你的肺!</text>
            <view class="news-meta">
              <view class="news-hot">
                <text class="hot-icon">🔥</text>
                <text class="hot-text">热度 233</text>
              </view>
              <text class="news-date">2022-12-28</text>
            </view>
          </view>
          <view class="news-image">
            <view class="image-placeholder">
              <image src="/static/tabbar/i1.png" mode="aspectFill"></image>
            </view>
          </view>
        </view>
        <view class="news-item">
          <view class="news-content">
            <text class="news-text">食物中的"隐形盐"，你了解多少?</text>
            <view class="news-meta">
              <view class="news-hot">
                <text class="hot-icon">🔥</text>
                <text class="hot-text">热度 50</text>
              </view>
              <text class="news-date">2022-12-20</text>
            </view>
          </view>
          <view class="news-image">
            <view class="image-placeholder">
              <image src="/static/tabbar/i2.png" mode="aspectFill"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
function goToConsultation() {
  uni.navigateTo({
    url: "/pages/consultation/consultation",
  });
}

function goToAppointment() {
  uni.navigateTo({
    url: "/pages/appointment/appointment",
  });
}
</script>

<style scoped>
.index-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

/* 顶部用户信息区域 */
.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}

.user-avatar image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #e0e0e0;
}

.welcome-text {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
}

/* 主要功能按钮区域 */
.main-functions {
  margin-bottom: 40rpx;
}

.function-row {
  display: flex;
  gap: 20rpx;
}

.main-function-btn {
  flex: 1;
  background: linear-gradient(135deg, #32cd32, #228b22);
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  text-align: center;
  color: white;
  box-shadow: 0 8rpx 30rpx rgba(50, 205, 50, 0.3);
}

.appointment-btn {
  background: linear-gradient(135deg, #4169e1, #1e90ff);
  box-shadow: 0 8rpx 30rpx rgba(65, 105, 225, 0.3);
}

.function-icon {
  margin-bottom: 20rpx;
}

.icon-text {
  font-size: 60rpx;
}

.function-title {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.function-desc {
  font-size: 20rpx;
  opacity: 0.7;
}

/* 小型功能图标区域 */
.small-functions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.small-function-item {
  background-color: white;
  border-radius: 15rpx;
  padding: 30rpx 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  flex: 1;
  margin: 0 5rpx;
}

.small-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15rpx;
}

.medical-icon {
  background-color: #e8f5e8;
}

.search-icon {
  background-color: #fff3e0;
}

.pharmacy-icon {
  background-color: #e3f2fd;
}

.reminder-icon {
  background-color: #ffebee;
}

.small-icon-text {
  font-size: 32rpx;
}

.small-function-name {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}

/* 健康新闻区域 */
.news-section {
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.news-header {
  margin-bottom: 30rpx;
}

.news-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.news-underline {
  width: 60rpx;
  height: 4rpx;
  background-color: #32cd32;
  border-radius: 2rpx;
}

.news-list {
}

.news-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.news-item:last-child {
  border-bottom: none;
}

.news-content {
  flex: 1;
  margin-right: 20rpx;
}

.news-text {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 15rpx;
  line-height: 1.4;
}

.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.news-hot {
  display: flex;
  align-items: center;
}

.hot-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.hot-text {
  font-size: 24rpx;
  color: #ff6b35;
}

.news-date {
  font-size: 24rpx;
  color: #999;
}

.news-image {
  width: 120rpx;
  height: 80rpx;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
  overflow: hidden;
}

.image-placeholder image {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}
</style>
